<template>
  <div>
    <div>
      <el-input placeholder="输入班次号搜索" v-model="searchNumber" clearable style="width: 70%; left: 15%;padding-top: 3%"
                @keyup.enter.native="getData" @input="getData"/>
      <el-input placeholder="输入终点站搜索" v-model="searchEndShift" style="width: 70%; left: 15%; padding-top: 10px"
                @keyup.enter.native="getData" @input="getData"/>
    </div>
    <div style="padding-top: 100px">
      <el-table :data="formData">
        <el-table-column prop="number" label="班次号" align="center"/>
        <el-table-column label="发车时间" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.time | formatDateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="busload" label="载客量" :show-overflow-tooltip="true" align="center"/>
        <el-table-column prop="beginShift" label="开始站点" align="center"/>
        <el-table-column prop="via" label="途经站点" align="center"/>
        <el-table-column prop="endShift" label="结束站点" align="center"/>

        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click.stop="bookTicket(scope.row.id)" round>订票</el-button>
          </template>
        </el-table-column>
        <el-table-column label="打印车票" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click.stop="getTicket(scope.row.id)" round>打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="padding-left: 5%">
      <pagination ref="Pagination" @update="getData"></pagination>
    </div>
  </div>
</template>

<script>

import {bookTicket, getTicket, pageShiftApi} from "@/api/station/shift";
import Pagination from '@/components/Pagination'

export default {
  name: "Shift",
  components: {Pagination},
  data() {
    return {
      searchNumber: null,
      searchEndShift: null,
      formData: [],
      total: 0,
      current: 1,
      size: 10,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let pagination = this.$refs.Pagination;
      let param = {
        current: pagination.current,
        size: pagination.size,
        number: this.searchNumber,
        endShift: this.searchEndShift
      };
      pageShiftApi(param).then(result => {
        let response = result.resultParam.shiftPage;
        this.formData = response.records;
        pagination.total = response.total;
      })
    },
    bookTicket(id){
      this.$msgBox("是否确定订票")
      .then(() => {
        let param = {
          id: id
        };
        bookTicket(param).then((result) => {
          if(result.status === 400)
            this.$errorMsg(result.message);
          else if(result.status === 200)
            this.$msgbox(result.message);
        })
        }).catch(err => {
          console.log(err.response.status);
          //跳转到登录页面
          if(err.response.status === 401){
            this.$router.push({name:'login'})
          }
      });
    },
    getTicket(id){
      this.$msgBox("是否打印订单")
        .then(() => {
          let param = {
            id: id
          };
          getTicket(param).then((result) => {
            if(result.status === 400)
              this.$errorMsg(result.message);
            else if(result.status === 200){
              window.open("http://localhost:8090/" + result.resultParam.posterPath)
            }
          })
        }).catch(err => {
        console.log(err.response.status);
        //跳转到登录页面
        if(err.response.status === 401){
          this.$router.push({name:'login'})
        }
      });
    }
  }
}
</script>
